import { useMemo } from 'react';
import { Checkbox, Row, Col, Button } from 'antd';
import { cloneDeep, find, findIndex } from 'lodash';
import styles from './index.module.less';

const TemplateRight = ({
  currId,
  attrList,
  templateData,
  updateData,
  updateId,
}) => {
  const { templateValue = [] } = templateData;

  const checkedValues = useMemo(() => {
    //商品信息选中项
    // const obj = find(templateValue, ['type', 'text']);
    const obj = find(templateValue, (o) => {
      if (o.props && o.props.length > 0) {
        return true;
      } else {
        return false;
      }
    });
    if (obj && obj.props) {
      return obj.props;
    } else {
      return [];
    }
  }, [templateValue]);

  const checkedAttrValues = useMemo(() => {
    //系统商品属性选中项
    const arr = [];
    templateValue.forEach((item) => {
      if (item.prop) {
        arr.push(item.prop);
      }
    });
    return arr;
  }, [templateValue]);

  //新增文本框
  const handleAddText = () => {
    const obj = cloneDeep(templateData);
    const arr = obj.templateValue;
    const id = new Date().getTime();
    arr.push({
      type: 'customtext',
      id: id,
      value: '',
      left: 24,
      top: 24,
      width: 148,
      height: 40,
      fontFamily: '黑体',
      fontSize: 9,
    });
    updateId(id);
    updateData(obj);
  };

  //新增二维码框
  const handleAddQRCode = () => {
    const obj = cloneDeep(templateData);
    const arr = obj.templateValue;
    const id = new Date().getTime();
    arr.push({
      type: 'qrcode',
      id: id,
      value: 'http://www.zhaojiafang.com/',
      left: 24,
      top: 24,
      width: 48,
      height: 48,
    });
    updateId(id);
    updateData(obj);
  };

  //新增条形码
  const handleAddBarCode = () => {
    const obj = cloneDeep(templateData);
    const arr = obj.templateValue;
    const id = new Date().getTime();
    arr.push({
      type: 'barcode',
      id: id,
      value: '12345678',
      left: 24,
      top: 24,
      width: 120,
      height: 62,
    });
    updateId(id);
    updateData(obj);
  };

  //新增图片
  const handleAddPictrue = () => {
    const obj = cloneDeep(templateData);
    const arr = obj.templateValue;
    const id = new Date().getTime();
    arr.push({
      type: 'picture',
      id: id,
      value: '',
      left: 24,
      top: 24,
      width: 82,
      height: 82,
    });
    updateId(id);
    updateData(obj);
  };

  //商品信息勾选更改
  const handleGoodsChange = (checkedValues) => {
    // const index = findIndex(templateValue, ['type', 'text']);
    const index = findIndex(templateValue, (o) => {
      if (o.props && o.props.length > 0) {
        return true;
      } else {
        return false;
      }
    });
    if (index > -1) {
      templateValue[index].props = checkedValues;
      if (templateValue[index].id != currId) {
        updateId(templateValue[index].id);
      }
      updateData({ ...templateData, templateValue: [...templateValue] });
    } else {
      const id = new Date().getTime();
      templateValue.push({
        type: 'text',
        id: id,
        props: checkedValues,
        left: 24,
        top: 24,
        width: 160,
        height: 22,
        fontFamily: '黑体',
        fontSize: 9,
      });
      updateData({ ...templateData, templateValue: [...templateValue] });
      updateId(id);
    }
  };

  //商品属性点击更改
  const handleGoodsAttrChange = (e) => {
    if (e.target.checked) {
      const arr = [...templateValue];
      const id = new Date().getTime();
      arr.push({
        type: 'text',
        id: id,
        prop: e.target.value,
        left: 24,
        top: 24,
        width: 160,
        height: 22,
        fontFamily: '黑体',
        fontSize: 9,
      });
      updateData({ ...templateData, templateValue: [...arr] });
      updateId(id);
    } else {
      const arr = [...templateValue];
      const index = findIndex(arr, ['prop', e.target.value]);
      if (index > -1) {
        if (arr[index].id == currId) {
          updateId(undefined);
        }
        arr.splice(index, 1);
        updateData({ ...templateData, templateValue: [...arr] });
      }
    }
  };

  return (
    <div style={{ display: 'flex', flexDirection: 'column' }}>
      <h4 style={{ marginBottom: '16px', fontWeight: 'bold' }}>打印内容设置</h4>
      <div className={styles.operaWrapRight}>
        <h4>自定义信息</h4>
        <div className={styles.flexBox}>
          <div className={styles.flexItem}>
            <Button onClick={handleAddText}>新增文本框</Button>
          </div>
          <div className={styles.flexItem}>
            <Button onClick={handleAddQRCode}>新增二维码</Button>
          </div>
          <div className={styles.flexItem}>
            <Button onClick={handleAddBarCode}>新增条码</Button>
          </div>
          <div className={styles.flexItem}>
            <Button onClick={handleAddPictrue}>新增图片</Button>
          </div>
        </div>
        <h4 style={{ marginBottom: '12px', marginTop: '24px' }}>商品信息</h4>
        <Checkbox.Group onChange={handleGoodsChange} value={checkedValues}>
          <Row>
            <Col span={12}>
              <Checkbox value="goodsName">订单商品名称</Checkbox>
            </Col>
            <Col span={12}>
              <Checkbox value="goodsSpce">订单规格属性</Checkbox>
            </Col>
            <Col span={12}>
              <Checkbox value="spuId">订单款式编码</Checkbox>
            </Col>
            <Col span={12}>
              <Checkbox value="goodsId">订单商品编码</Checkbox>
            </Col>
          </Row>
        </Checkbox.Group>
        {attrList.length > 0 && (
          <>
            <h4 style={{ marginBottom: '12px', marginTop: '24px' }}>
              系统商品属性
            </h4>
            <Checkbox.Group value={checkedAttrValues}>
              <Row>
                {attrList.map((item) => (
                  <Col key={item.goodsCategoryPk} span={12}>
                    <Checkbox
                      onChange={handleGoodsAttrChange}
                      value={item.attributeName}
                    >
                      {item.attributeName}
                    </Checkbox>
                  </Col>
                ))}
              </Row>
            </Checkbox.Group>
          </>
        )}
      </div>
    </div>
  );
};

export default TemplateRight;
